<template>
	<view>{{v1}}</view>
	<view>{{v2}}</view>
	<button @click="add">加一</button>
</template>
<script setup>
	import {
		ref,
		reactive,
		watch,
		watchEffect
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	const v1 = ref(1);
	const v2 = ref(2);
	const data = reactive({
		a: 1,
		b: 2,
		c: {
			sss: 'yes'
		}
	})
	const list = reactive([1,2,3])
	watch(()=>list, (newValue, oldValue) => {
		console.log('监视数组：', newValue, oldValue)
	})
	// watch(v1, (newValue, oldValue) => {
	// 	console.log('v1====', newValue, oldValue)
	// })
	// watch(v1, (newValue, oldValue) => {
	// 	console.log('v1====', newValue, oldValue)
	// })
	// watch([v1, v2], (newValue, oldValue) => {
	// 	console.log('v1====', newValue, oldValue)
	// })
	// watch(data, (newValue, oldValue) => {
	// 	console.log('v1====', newValue, oldValue)
	// })
	// watch(() => data.a, (newValue, oldValue) => {
	// 	console.log('监视reactive定义的响应式数据中的某个属性a：', newValue, oldValue)
	// }, {
	// 	deep: false
	// })
	// watch(() => data.c.sss, (newValue, oldValue) => {
	// 	console.log('监视reactive定义的响应式数据中的某个属性sss：', newValue, oldValue)
	// })
	// watch([() => data.a, () => data.c.sss], (newValue, oldValue) => {
	// 	console.log('监视reactive定义的响应式数据中的多个属性a和sss：', newValue, oldValue)
	// })
	
	const store = useStore()
	// console.log('store',store.state.count)
	// watch(()=>store.state.count, (newValue, oldValue) => {
	// 	console.log('监视vuex中的值：', newValue, oldValue)
	// })
	
	function add() {
		v1.value++;
		v2.value++;
		data.a++;
		data.c.sss = '喜喜';
		store.commit('increment')
		list[0]++
	}
	// watchEffect(() => {
	// 	console.log(v1.value)
	// 	console.log(data)
	// })
</script>

<style scoped>

</style>
